<template>
  <div class="center">
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span class="hand" >{{title}}</span>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col :span="4">
        <div class="left">
          <el-row>
            <el-col :span="4">
              <div class="firstLine"></div>
            </el-col>
            <el-col :span="2">
              <div class="firstCircle"></div>
            </el-col>
            <el-col :span="8">
              <div class="invite">面试邀约</div>
            </el-col>
            <el-col :span="2">
              <div class="firstCircle"></div>
            </el-col>
            <el-col :span="4">
              <div class="firstLine" style="margin-left:-8px;"></div>
            </el-col>
          </el-row>
          <el-row>
            <div class="first">
              <el-col :span="12" v-for="(item,index) in inviteList" :key="index">
                <el-button type="primary" round size="mini">{{item}}</el-button>
              </el-col>
            </div>
          </el-row>
          <el-row  style="margin-top:30px;">
            <el-col :span="4">
              <div class="secondLine"></div>
            </el-col>
            <el-col :span="2">
              <div class="secondCircle"></div>
            </el-col>
            <el-col :span="8">
              <div class="position">面试现场</div>
            </el-col>
            <el-col :span="2">
              <div class="secondCircle"></div>
            </el-col>
            <el-col :span="4">
              <div class="secondLine" style="margin-left:-8px;"></div>
            </el-col>
          </el-row>
          <el-row>
            <div class="second">
              <el-col :span="12" v-for="(item,index) in positionList" :key="index">
                <el-button type="primary" round size="mini">{{item}}</el-button>
              </el-col>
            </div>
          </el-row>
          <el-row  style="margin-top:30px;">
            <el-col :span="4">
              <div class="thirdLine"></div>
            </el-col>
            <el-col :span="2">
              <div class="thirdCircle"></div>
            </el-col>
            <el-col :span="8">
              <div class="process">面试形式</div>
            </el-col>
            <el-col :span="2">
              <div class="thirdCircle"></div>
            </el-col>
            <el-col :span="4">
              <div class="thirdLine" style="margin-left:-8px;"></div>
            </el-col>
          </el-row>
          <el-row>
            <div class="third">
              <el-col :span="12" v-for="(item,index) in typeList" :key="index">
                <el-button type="primary" round size="mini">{{item}}</el-button>
              </el-col>
            </div>
          </el-row>
        </div>
      </el-col>
      <el-col :span="19" :offset="1" class="rightContent">
        <div style="background-color:#fff" class="secondTime">
          <el-row style="padding:14px 18px;" class="addFirst">
            <p style="color:#1497ff;font-size:16px;font-weight:700;margin-bottom:6px;">一面流程</p>
            <el-col :span="6" v-for="(item,index) in firstData" :key="index" style="margin-right:50px;margin-bottom:20px;">
              <el-card shadow="hover">
                  <div slot="header">
                    <el-col :span="20">
                      {{item.time}}
                    </el-col>
                    <el-col :span="4">
                      <div class="operation">
                          <i class="iconfont icon-xiugai" @click="editClick(item.id,item.totalRound)"></i>
                          <i class="iconfont icon-shanchu" @click="deleteClick(item.id)"></i>
                        </div>
                    </el-col>
                  </div>
                  <el-row class="clear">
                    <div class="float">
                      <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#cbe9ff;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                        <i class="iconfont icon-qizhi" style="color:#6cc1ff;font-size:20px;"></i>
                      </span>
                      <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.solicit}}</span>
                    </div>
                    <div class="float" v-if="item.position">
                      <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#ffe9ba;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                        <i class="iconfont icon-qizhi" style="color:#ffb737;font-size:20px;"></i>
                      </span>
                      <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.position}}</span>
                    </div>
                    <div class="float" v-if="item.process">
                      <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#c0f6f8;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                        <i class="iconfont icon-qizhi" style="color:#1ecbd1;font-size:20px;"></i>
                      </span>
                      <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.process}}</span>
                    </div>
                  </el-row>
              </el-card>
            </el-col>
            <el-col :span="6" style="margin-bottom:20px;" >
              <el-card shadow="hover" style="border-style:dashed;text-align:center;cursor:pointer" @click.native="addFirstProcess">
                <div style="display:inline-block;width:22px;height:22px;border:2px solid #d2d2d2;border-radius:13px;margin-top:13px;">
                  <i class="el-icon-plus" style="font-weight:bold;color:#d2d2d2"></i>
                </div>
                <div style="margin-top:20px;color:#bfbfbf;">新增一面流程</div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div style="background-color:#fff;margin-top:6px;" class="secondTime">
          <el-row style="padding:14px 18px;">
            <p style="color:#1497ff;font-size:16px;font-weight:700;margin-bottom:6px;">二面流程</p>
            <el-col :span="14" v-for="(item,index) in secondData" :key="index" style="margin-bottom:20px;">
              <el-row>
                <el-col :span="11">
                  <el-card shadow="hover">
                    <div slot="header">
                      <el-col :span="20">
                        {{item.firstTime}}
                      </el-col>
                      <el-col :span="4">
                        <div class="operation">
                            <i class="iconfont icon-xiugai" @click="editClick(item.id,item.totalRound)"></i>
                            <i class="iconfont icon-shanchu" @click="deleteClick(item.id)"></i>
                          </div>
                      </el-col>
                    </div>
                    <el-row>
                      <div class="float">
                        <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#cbe9ff;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                          <i class="iconfont icon-qizhi" style="color:#6cc1ff;font-size:20px;"></i>
                        </span>
                        <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.firstSolicit}}</span>
                      </div>
                      <div class="float" v-if="item.firstPosition">
                        <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#ffe9ba;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                          <i class="iconfont icon-qizhi" style="color:#ffb737;font-size:20px;"></i>
                        </span>
                        <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.firstPosition}}</span>
                      </div>
                      <div class="float" v-if="item.firstProcess">
                        <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#c0f6f8;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                          <i class="iconfont icon-qizhi" style="color:#1ecbd1;font-size:20px;"></i>
                        </span>
                        <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.firstProcess}}</span>
                      </div>
                    </el-row>
                  </el-card>
                </el-col>
                <el-col :span="2">
                  <div style="text-align:center;line-height:110px">
                    <i class="el-icon-right" style="font-size:30px;"></i>
                  </div>
                </el-col>
                <el-col :span="11">
                  <el-card shadow="hover">
                    <div slot="header">
                      <el-col :span="20">
                        {{item.secondTime}}
                      </el-col>
                    </div>
                    <el-row>
                      <div class="float">
                        <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#cbe9ff;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                          <i class="iconfont icon-qizhi" style="color:#6cc1ff;font-size:20px;"></i>
                        </span>
                        <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.secondSolicit}}</span>
                      </div>
                      <div class="float" v-if="item.secondPosition">
                        <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#ffe9ba;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                          <i class="iconfont icon-qizhi" style="color:#ffb737;font-size:20px;"></i>
                        </span>
                        <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.secondPosition}}</span>
                      </div>
                      <div class="float" v-if="item.secondProcess">
                        <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#c0f6f8;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                          <i class="iconfont icon-qizhi" style="color:#1ecbd1;font-size:20px;"></i>
                        </span>
                        <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.secondProcess}}</span>
                      </div>
                    </el-row>
                  </el-card>
                </el-col>
                </el-row>
                </el-col>
              </el-row>
              <el-col :span="6" style="margin-bottom:20px;margin-left:18px;width:403px;">
                <el-card shadow="hover" style="border-style:dashed;text-align:center;cursor:pointer" @click.native="addSecondProcess">
                  <div style="display:inline-block;width:22px;height:22px;border:2px solid #d2d2d2;border-radius:13px;margin-top:13px;">
                    <i class="el-icon-plus" style="font-weight:bold;color:#d2d2d2"></i>
                  </div>
                  <div style="margin-top:20px;color:#bfbfbf;">新增二面流程</div>
                </el-card>
              </el-col>
        </div>
        <div style="background-color:#fff;margin-top:6px;" class="secondTime">
          <el-row style="padding:14px 18px;">
            <p style="color:#1497ff;font-size:16px;font-weight:700;margin-bottom:6px;">三面流程</p>
            <el-col :span="22" v-for="(item,index) in thirdData" :key="index" style="margin-right:50px;margin-bottom:20px;">
              <el-row>
                <el-col :span="7">
                  <el-card shadow="hover">
                    <div slot="header">
                      <el-col :span="20">
                        {{item.firstTime}}
                      </el-col>
                      <el-col :span="4">
                        <div class="operation">
                            <i class="iconfont icon-xiugai" @click="editClick(item.id,item.totalRound)"></i>
                            <i class="iconfont icon-shanchu" @click="deleteClick(item.id)"></i>
                          </div>
                      </el-col>
                    </div>
                    <el-row>
                      <div class="float">
                        <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#cbe9ff;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                          <i class="iconfont icon-qizhi" style="color:#6cc1ff;font-size:20px;"></i>
                        </span>
                        <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.firstSolicit}}</span>
                      </div>
                      <div class="float" v-if="item.firstPosition">
                        <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#ffe9ba;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                          <i class="iconfont icon-qizhi" style="color:#ffb737;font-size:20px;"></i>
                        </span>
                        <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.firstPosition}}</span>
                      </div>
                      <div class="float" v-if="item.firstProcess">
                        <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#c0f6f8;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                          <i class="iconfont icon-qizhi" style="color:#1ecbd1;font-size:20px;"></i>
                        </span>
                        <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.firstProcess}}</span>
                      </div>
                    </el-row>
                  </el-card>
                </el-col>
                <el-col :span="1">
                  <div style="text-align:center;line-height:110px">
                    <i class="el-icon-right" style="font-size:30px;"></i>
                  </div>
                </el-col>
                <el-col :span="7">
                  <el-card shadow="hover">
                    <div slot="header">
                      <el-col :span="20">
                        {{item.secondTime}}
                      </el-col>
                    </div>
                    <el-row>
                      <div class="float">
                        <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#cbe9ff;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                          <i class="iconfont icon-qizhi" style="color:#6cc1ff;font-size:20px;"></i>
                        </span>
                        <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.secondSolicit}}</span>
                      </div>
                      <div class="float" v-if="item.secondPosition">
                        <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#ffe9ba;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                          <i class="iconfont icon-qizhi" style="color:#ffb737;font-size:20px;"></i>
                        </span>
                        <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.secondPosition}}</span>
                      </div>
                      <div class="float" v-if="item.secondProcess">
                        <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#c0f6f8;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                          <i class="iconfont icon-qizhi" style="color:#1ecbd1;font-size:20px;"></i>
                        </span>
                        <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.secondProcess}}</span>
                      </div>
                    </el-row>
                  </el-card>
                </el-col>
                <el-col :span="1">
                  <div style="text-align:center;line-height:110px">
                    <i class="el-icon-right" style="font-size:30px;"></i>
                  </div>
                </el-col>
                <el-col :span="7">
                  <el-card shadow="hover">
                    <div slot="header">
                      <el-col :span="20">
                        {{item.thirdTime}}
                      </el-col>
                    </div>
                    <el-row>
                      <div class="float">
                        <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#cbe9ff;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                          <i class="iconfont icon-qizhi" style="color:#6cc1ff;font-size:20px;"></i>
                        </span>
                        <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.thirdSolicit}}</span>
                      </div>
                      <div class="float" v-if="item.thirdPosition">
                        <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#ffe9ba;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                          <i class="iconfont icon-qizhi" style="color:#ffb737;font-size:20px;"></i>
                        </span>
                        <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.thirdPosition}}</span>
                      </div>
                      <div class="float" v-if="item.thirdProcess">
                        <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#c0f6f8;padding-top:2px;padding-right:1px;margin-top:20px;vertical-align:middle;">
                          <i class="iconfont icon-qizhi" style="color:#1ecbd1;font-size:20px;"></i>
                        </span>
                        <span style="display:inline-block;font-size:12px;color:#757575;margin-top:20px;vertical-align:middle;">{{item.thirdProcess}}</span>
                      </div>
                    </el-row>
                  </el-card>
                </el-col>
                </el-row>
                </el-col>
              </el-row>
              <el-col :span="6" style="margin-bottom:20px;margin-left:18px;width:403px;">
                <el-card shadow="hover" style="border-style:dashed;text-align:center;cursor:pointer" @click.native="addThirdProcess">
                  <div style="display:inline-block;width:22px;height:22px;border:2px solid #d2d2d2;border-radius:13px;margin-top:13px;">
                    <i class="el-icon-plus" style="font-weight:bold;color:#d2d2d2"></i>
                  </div>
                  <div style="margin-top:20px;color:#bfbfbf;">新增三面流程</div>
                </el-card>
              </el-col>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="firstprocess"
      :visible.sync="firstDialogVisible"
      width="415px"
      :before-close="firstClose"
      class="addP contentR"
    >
      <el-form :model="firstForm" ref="formF" :rules="ruleF" label-position="top">
        <el-form-item label="一面邀约" prop="solicit">
          <el-select v-model="firstForm.solicit" placeholder="请选择面试邀约" style="width:90%">
            <el-option label="客户邀约通知" value="CI"></el-option>
            <el-option label="客户邀约不通知" value="CNI"></el-option>
            <el-option label="我司邀约" value="DH"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="一面现场" prop="position">
          <el-select v-model="firstForm.position" placeholder="请选择面试现场" style="width:90%">
            <el-option label="客户现场" value="Y"></el-option>
            <el-option label="客户非现场" value="S"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="一面形式" prop="process">
          <el-select v-model="firstForm.process" multiple  placeholder="请选择面试形式（可多选）" style="width:90%">
            <el-option label="电话面试" value="电话面试"></el-option>
            <el-option label="上机" value="上机"></el-option>
            <el-option label="技术面试" value="技术面试"></el-option>
            <el-option label="人资面试" value="人资面试"></el-option>
            <el-option label="笔试" value="笔试"></el-option>
            <el-option label="面试" value="面试"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="firstAddConfirm('formF')">确 定</el-button>
        <el-button round @click="firstClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="删除该面试流程"
      :visible.sync="dialogDeleteVisible"
      width="30%"
      :before-close="deleteClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">确定删除该面试流程吗？</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="deletesend">确 定</el-button>
    <el-button round @click="deleteClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    <el-dialog
      :title="secondprocess"
      :visible.sync="secondDialogVisible"
      width="415px"
      :before-close="secondClose"
      class="addP contentR"
    >
      <el-form :model="secondForm" ref="formS" :rules="ruleS" label-position="top">
        <el-form-item label="一面邀约" prop="firstSolicit">
          <el-select v-model="secondForm.firstSolicit" placeholder="请选择面试邀约" style="width:90%">
            <el-option label="客户邀约通知" value="CI"></el-option>
            <el-option label="客户邀约不通知" value="CNI"></el-option>
            <el-option label="我司邀约" value="DH"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="一面现场" prop="firstPosition">
          <el-select v-model="secondForm.firstPosition" placeholder="请选择面试现场" style="width:90%">
            <el-option label="客户现场" value="Y"></el-option>
            <el-option label="客户非现场" value="S"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="一面形式" prop="firstProcess">
          <el-select v-model="secondForm.firstProcess" multiple  placeholder="请选择面试形式（可多选）" style="width:90%">
            <el-option label="电话面试" value="电话面试"></el-option>
            <el-option label="上机" value="上机"></el-option>
            <el-option label="技术面试" value="技术面试"></el-option>
            <el-option label="人资面试" value="人资面试"></el-option>
            <el-option label="笔试" value="笔试"></el-option>
            <el-option label="面试" value="面试"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二面邀约" prop="secondSolicit">
          <el-select v-model="secondForm.secondSolicit" placeholder="请选择面试邀约" style="width:90%">
            <el-option label="客户邀约通知" value="CI"></el-option>
            <el-option label="客户邀约不通知" value="CNI"></el-option>
            <el-option label="我司邀约" value="DH"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二面现场" prop="secondPosition">
          <el-select v-model="secondForm.secondPosition" placeholder="请选择面试现场" style="width:90%">
            <el-option label="客户现场" value="Y"></el-option>
            <el-option label="客户非现场" value="S"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二面形式" prop="secondProcess">
          <el-select v-model="secondForm.secondProcess" multiple  placeholder="请选择面试形式（可多选）" style="width:90%">
            <el-option label="电话面试" value="电话面试"></el-option>
            <el-option label="上机" value="上机"></el-option>
            <el-option label="技术面试" value="技术面试"></el-option>
            <el-option label="人资面试" value="人资面试"></el-option>
            <el-option label="笔试" value="笔试"></el-option>
            <el-option label="面试" value="面试"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="secondAddConfirm('formS')">确 定</el-button>
        <el-button round @click="secondClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="thirdprocess"
      :visible.sync="thirdDialogVisible"
      width="415px"
      :before-close="thirdClose"
      class="addP contentR"
    >
      <div class="high">
      <el-form :model="thirdForm" ref="formT" :rules="ruleT" label-position="top">
        <el-form-item label="一面邀约" prop="firstSolicit">
          <el-select v-model="thirdForm.firstSolicit" placeholder="请选择面试邀约" style="width:90%">
            <el-option label="客户邀约通知" value="CI"></el-option>
            <el-option label="客户邀约不通知" value="CNI"></el-option>
            <el-option label="我司邀约" value="DH"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="一面现场" prop="firstPosition">
          <el-select v-model="thirdForm.firstPosition" placeholder="请选择面试现场" style="width:90%">
            <el-option label="客户现场" value="Y"></el-option>
            <el-option label="客户非现场" value="S"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="一面形式" prop="firstProcess">
          <el-select v-model="thirdForm.firstProcess" multiple  placeholder="请选择面试形式（可多选）" style="width:90%">
            <el-option label="电话面试" value="电话面试"></el-option>
            <el-option label="上机" value="上机"></el-option>
            <el-option label="技术面试" value="技术面试"></el-option>
            <el-option label="人资面试" value="人资面试"></el-option>
            <el-option label="笔试" value="笔试"></el-option>
            <el-option label="面试" value="面试"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二面邀约" prop="secondSolicit">
          <el-select v-model="thirdForm.secondSolicit" placeholder="请选择面试邀约" style="width:90%">
            <el-option label="客户邀约通知" value="CI"></el-option>
            <el-option label="客户邀约不通知" value="CNI"></el-option>
            <el-option label="我司邀约" value="DH"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二面现场" prop="secondPosition">
          <el-select v-model="thirdForm.secondPosition" placeholder="请选择面试现场" style="width:90%">
            <el-option label="客户现场" value="Y"></el-option>
            <el-option label="客户非现场" value="S"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二面形式" prop="secondProcess">
          <el-select v-model="thirdForm.secondProcess" multiple  placeholder="请选择面试形式（可多选）" style="width:90%">
            <el-option label="电话面试" value="电话面试"></el-option>
            <el-option label="上机" value="上机"></el-option>
            <el-option label="技术面试" value="技术面试"></el-option>
            <el-option label="人资面试" value="人资面试"></el-option>
            <el-option label="笔试" value="笔试"></el-option>
            <el-option label="面试" value="面试"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三面邀约" prop="thirdSolicit">
          <el-select v-model="thirdForm.thirdSolicit" placeholder="请选择面试邀约" style="width:90%">
            <el-option label="客户邀约通知" value="CI"></el-option>
            <el-option label="客户邀约不通知" value="CNI"></el-option>
            <el-option label="我司邀约" value="DH"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三面现场" prop="thirdPosition">
          <el-select v-model="thirdForm.thirdPosition" placeholder="请选择面试现场" style="width:90%">
            <el-option label="客户现场" value="Y"></el-option>
            <el-option label="客户非现场" value="S"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三面形式" prop="thirdProcess">
          <el-select v-model="thirdForm.thirdProcess" multiple  placeholder="请选择面试形式（可多选）" style="width:90%">
            <el-option label="电话面试" value="电话面试"></el-option>
            <el-option label="上机" value="上机"></el-option>
            <el-option label="技术面试" value="技术面试"></el-option>
            <el-option label="人资面试" value="人资面试"></el-option>
            <el-option label="笔试" value="笔试"></el-option>
            <el-option label="面试" value="面试"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="thirdAddConfirm('formT')">确 定</el-button>
        <el-button round @click="thirdClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
export default {
  data(){
    return {
      title:"面试流程",
      firstData:[],
      secondData:[],
      thirdData:[],
      inviteList:["客户邀约通知","客户邀约不通知","我司邀约"],
      positionList:["客户现场","客户非现场"],
      typeList:["电话面试","上机","技术面试","人资面试","笔试","面试"],
      firstprocess:"新增一面面试流程",
      secondprocess:"新增二面面试流程",
      thirdprocess:"新增三面面试流程",
      isAdd:true,
      editId:0,
      deleteId:0,
      firstDialogVisible:false,
      secondDialogVisible:false,
      thirdDialogVisible:false,
      dialogDeleteVisible:false,
      firstForm:{
        solicit:"",
        position:"",
        process:[]
      },
      ruleF:{
        solicit:[
          {required: true, message: "请选择面试邀约",trigger:"change"}
        ],
        position:[
          {required: true, message: "请选择面试现场",trigger:"change"}
        ],
        process:[
          {required: true, message: "请选择面试形式",trigger:"change"}
        ]
      },
      secondForm:{
        firstSolicit:"",
        firstPosition:"",
        firstProcess:[],
        secondSolicit:"",
        secondPosition:"",
        secondProcess:[]
      },
      ruleS:{
        firstSolicit:[
          {required: true, message: "请选择一面邀约",trigger:"change"}
        ],
        firstPosition:[
          {required: true, message: "请选择一面现场",trigger:"change"}
        ],
        firstProcess:[
          {required: true, message: "请选择一面形式",trigger:"change"}
        ],
        secondSolicit:[
          {required: true, message: "请选择二面邀约",trigger:"change"}
        ],
        secondPosition:[
          {required: true, message: "请选择二面现场",trigger:"change"}
        ],
        secondProcess:[
          {required: true, message: "请选择二面形式",trigger:"change"}
        ]
      },
      thirdForm:{
        firstSolicit:"",
        firstPosition:"",
        firstProcess:[],
        secondSolicit:"",
        secondPosition:"",
        secondProcess:[],
        thirdSolicit:"",
        thirdPosition:"",
        thirdProcess:[]
      },
      ruleT:{
        firstSolicit:[
          {required: true, message: "请选择一面邀约",trigger:"change"}
        ],
        firstPosition:[
          {required: true, message: "请选择一面现场",trigger:"change"}
        ],
        firstProcess:[
          {required: true, message: "请选择一面形式",trigger:"change"}
        ],
        secondSolicit:[
          {required: true, message: "请选择二面邀约",trigger:"change"}
        ],
        secondPosition:[
          {required: true, message: "请选择二面现场",trigger:"change"}
        ],
        secondProcess:[
          {required: true, message: "请选择二面形式",trigger:"change"}
        ],
        thirdSolicit:[
          {required: true, message: "请选择三面邀约",trigger:"change"}
        ],
        thirdPosition:[
          {required: true, message: "请选择三面现场",trigger:"change"}
        ],
        thirdProcess:[
          {required: true, message: "请选择三面形式",trigger:"change"}
        ]
      },
    }
  },
  created(){
    this.success();
  },
  methods:{
    success(){
      axios.get(this.url + "/process/getprocess")
      .then(res =>{
        this.unlogin(res.data.code)
        if(res.data.code == 200){
          this.firstData = [];
          this.secondData = [];
          this.thirdData = [];
          let i = 0;
          let leng = res.data.data.length
          while(i < leng){
            if(res.data.data[i].totalRounds == 3){
              this.thirdData.push({
                id:res.data.data[i].processId,
                totalRound:res.data.data[i].totalRounds,
                firstTime:"一面",
                firstSolicit:res.data.data[i].invitationBody,
                firstPosition:res.data.data[i].site,
                firstProcess:res.data.data[i].interviewType,
                secondTime:"二面",
                secondSolicit:res.data.data[i+1].invitationBody,
                secondPosition:res.data.data[i+1].site,
                secondProcess:res.data.data[i+1].interviewType,
                thirdTime:"三面",
                thirdSolicit:res.data.data[i+2].invitationBody,
                thirdPosition:res.data.data[i+2].site,
                thirdProcess:res.data.data[i+2].interviewType,
              })
              i += 3;
            }else if(res.data.data[i].totalRounds == 2){
              this.secondData.push({
                id:res.data.data[i].processId,
                totalRound:res.data.data[i].totalRounds,
                firstTime:"一面",
                firstSolicit:res.data.data[i].invitationBody,
                firstPosition:res.data.data[i].site,
                firstProcess:res.data.data[i].interviewType,
                secondTime:"二面",
                secondSolicit:res.data.data[i+1].invitationBody,
                secondPosition:res.data.data[i+1].site,
                secondProcess:res.data.data[i+1].interviewType,
              })
              i += 2;
            }else {
              this.firstData.push({
                id:res.data.data[i].processId,
                totalRound:res.data.data[i].totalRounds,
                time:"一面",
                solicit:res.data.data[i].invitationBody,
                position:res.data.data[i].site,
                process:res.data.data[i].interviewType
              })
              i += 1;
            }
          }
        }
      })
    },
    initFirstData(){
      this.firstForm = {
        solicit:"",
        position:"",
        process:[]
      }
    },
    initSecondData(){
      this.secondForm = {
        firstSolicit:"",
        firstPosition:"",
        firstProcess:[],
        secondSolicit:"",
        secondPosition:"",
        secondProcess:[]
      }
    },
    initThirdData(){
      this.thirdForm = {
        firstSolicit:"",
        firstPosition:"",
        firstProcess:[],
        secondSolicit:"",
        secondPosition:"",
        secondProcess:[],
        thirdSolicit:"",
        thirdPosition:"",
        thirdProcess:[]
      }
    },
    addFirstProcess(){
      this.isAdd = true;
      this.firstDialogVisible = true;
      document.documentElement.style.overflow = "hidden";
      this.firstprocess = '新增一面面试流程'
    },
    addSecondProcess(){
      this.isAdd = true;
      this.secondDialogVisible = true;
      document.documentElement.style.overflow = "hidden";
      this.secondprocess = '新增二面面试流程'
    },
    addThirdProcess(){
      this.isAdd = true;
      this.thirdDialogVisible = true;
      document.documentElement.style.overflow = "hidden";
      this.thirdprocess = "新增三面面试流程"
    },
    firstAddConfirm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let proces = this.firstForm.process;
          proces = proces.join("+");
          let arr = [];
          arr.push({
            round:1,
            InvitationBody:this.firstForm.solicit,
            site:this.firstForm.position,
            interviewType:proces
          })
          if(this.isAdd){
            axios.post(this.url + "/process/junProcess",{
              processli:arr
            }).then(res=>{
              this.unlogin(res.data.code)
              if(res.data.code == 200){
                axios.post(this.url + "/process/addprocess",{
                  processli:arr
                }).then(res =>{
                  this.unlogin(res.data.code)
                  if(res.data.code == 200){
                    this.firstDialogVisible = false;
                    document.documentElement.style.overflow = "auto";
                    this.$refs.formF.resetFields();
                    this.initFirstData();
                    this.success();
                  }
                })
              }else if(res.data.code == -200){
                this.$message({
                  message: '该流程已存在，请勿重复添加',
                  type: 'warning'
                });
              }
            })

          }else {
            if(arr[0].InvitationBody == "客户邀约不通知"){
              arr[0].InvitationBody = "CNI"
            }else if(arr[0].InvitationBody == "客户邀约通知"){
              arr[0].InvitationBody = "CI"
            }else if(arr[0].InvitationBody == "我司邀约"){
              arr[0].InvitationBody = "DH"
            }
            if(arr[0].site == "客户现场"){
              arr[0].site = "Y"
            }else if(arr[0].site == "客户非现场"){
              arr[0].site = "S"
            }
            axios.post(this.url + "/process/updateprocess",{
              processli:arr,
              processId:this.editId
            }).then(res =>{
              this.unlogin(res.data.code);
              if(res.data.code == 200){
                this.firstDialogVisible = false;
                document.documentElement.style.overflow = "auto";
                this.$refs.formF.resetFields();
                this.initFirstData();
                this.success();
              }
            })
          }
        }
      })
    },
    firstClose(){
      this.firstDialogVisible = false;
      document.documentElement.style.overflow = "auto";
      this.$refs.formF.resetFields();
      this.initFirstData();
    },
    secondAddConfirm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let fp = this.secondForm.firstProcess;
          fp = fp.join("+")
          let sp = this.secondForm.secondProcess;
          sp = sp.join("+")
          let arr =[];
          arr.push({
            round:1,
            InvitationBody:this.secondForm.firstSolicit,
            site:this.secondForm.firstPosition,
            interviewType:fp
          });
          arr.push({
            round:2,
            InvitationBody:this.secondForm.secondSolicit,
            site:this.secondForm.secondPosition,
            interviewType:sp
          });
          if(this.isAdd){
            axios.post(this.url + "/process/junProcess",{
              processli:arr
            }).then(res=>{
              this.unlogin(res.data.code)
              if(res.data.code == 200){
                axios.post(this.url + "/process/addprocess",{
                  processli:arr
                }).then(res =>{
                  this.unlogin(res.data.code)
                  if(res.data.code == 200){
                    this.secondDialogVisible = false;
                    document.documentElement.style.overflow = "auto";
                    this.$refs.formS.resetFields();
                    this.initSecondData();
                    this.success();
                  }
                })
              }else if(res.data.code == -200){
                this.$message({
                  message: '该流程已存在，请勿重复添加',
                  type: 'warning'
                });
              }
            })

          }else{
            if(arr[0].InvitationBody == "客户邀约不通知"){
              arr[0].InvitationBody = "CNI";
            }else if(arr[0].InvitationBody == "客户邀约通知"){
              arr[0].InvitationBody = "CI";
            }else if(arr[0].InvitationBody == "我司邀约"){
              arr[0].InvitationBody = "DH";
            }
            if(arr[0].site == "客户现场"){
              arr[0].site = "Y";
            }else if(arr[0].site == "客户非现场"){
              arr[0].site = "S";
            }
            if(arr[1].InvitationBody == "客户邀约不通知"){
              arr[1].InvitationBody = "CNI";
            }else if(arr[1].InvitationBody == "客户邀约通知"){
              arr[1].InvitationBody = "CI";
            }else if(arr[0].InvitationBody == "我司邀约"){
              arr[1].InvitationBody = "DH";
            }
            if(arr[1].site == "客户现场"){
              arr[1].site = "Y";
            }else {
              arr[1].site = "S";
            }
            axios.post(this.url + "/process/updateprocess",{
              processli:arr,
              processId:this.editId
            }).then(res =>{
              this.unlogin(res.data.code);
              if(res.data.code == 200){
                this.secondDialogVisible = false;
                document.documentElement.style.overflow = "auto";
                this.$refs.formS.resetFields();
                this.initSecondData();
                this.success();
              }
            })
          }
        }})


    },
    secondClose(){
      this.secondDialogVisible = false;
      document.documentElement.style.overflow = "auto";
      this.$refs.formS.resetFields();
      this.initSecondData();
    },
    thirdAddConfirm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let fp = this.thirdForm.firstProcess;
          fp = fp.join("+");
          let sp = this.thirdForm.secondProcess;
          sp = sp.join("+");
          let tp = this.thirdForm.thirdProcess;
          tp = tp.join("+");
          let arr =[];
          arr.push({
            round:1,
            InvitationBody:this.thirdForm.firstSolicit,
            site:this.thirdForm.firstPosition,
            interviewType:fp
          });
          arr.push({
            round:2,
            InvitationBody:this.thirdForm.secondSolicit,
            site:this.thirdForm.secondPosition,
            interviewType:sp
          });
          arr.push({
            round:3,
            InvitationBody:this.thirdForm.thirdSolicit,
            site:this.thirdForm.thirdPosition,
            interviewType:tp
          });
          if(this.isAdd){
            axios.post(this.url + "/process/junProcess",{
              processli:arr
            }).then(res=>{
              this.unlogin(res.data.code)
              if(res.data.code == 200){
                axios.post(this.url + "/process/addprocess",{
                  processli:arr
                }).then(res =>{
                  this.unlogin(res.data.code)
                  if(res.data.code == 200){
                    this.thirdDialogVisible = false;
                    document.documentElement.style.overflow = "auto";
                    this.$refs.formT.resetFields();
                    this.initThirdData();
                    this.success();
                  }
                })
              }else if(res.data.code == -200){
                this.$message({
                  message: '该流程已存在，请勿重复添加',
                  type: 'warning'
                });
              }
            })

          }else {
            if(arr[0].InvitationBody == "客户邀约不通知"){
              arr[0].InvitationBody = "CNI"
            }else if(arr[0].InvitationBody == "客户邀约通知"){
              arr[0].InvitationBody = "CI"
            }else if(arr[0].InvitationBody == "我司邀约"){
              arr[0].InvitationBody = "DH"
            }
            if(arr[0].site == "客户现场"){
              arr[0].site = "Y"
            }else if(arr[0].site == "客户非现场"){
              arr[0].site = "S"
            }
            if(arr[1].InvitationBody == "客户邀约不通知"){
              arr[1].InvitationBody = "CNI"
            }else if(arr[1].InvitationBody == "客户邀约通知"){
              arr[1].InvitationBody = "CI"
            }else if(arr[0].InvitationBody == "我司邀约"){
              arr[1].InvitationBody = "DH"
            }
            if(arr[1].site == "客户现场"){
              arr[1].site = "Y"
            }else if(arr[0].site == "客户非现场"){
              arr[1].site = "S"
            }
            if(arr[2].InvitationBody == "客户邀约不通知"){
              arr[2].InvitationBody = "CNI"
            }else if(arr[2].InvitationBody == "客户邀约通知"){
              arr[2].InvitationBody = "CI"
            }else if(arr[0].InvitationBody == "我司邀约"){
              arr[2].InvitationBody = "DH"
            }
            if(arr[2].site == "客户现场"){
              arr[2].site = "Y"
            }else if(arr[0].site == "客户非现场"){
              arr[2].site = "S"
            }
            axios.post(this.url + "/process/updateprocess",{
              processli:arr,
              processId:this.editId
            }).then(res =>{
              this.unlogin(res.data.code);
              if(res.data.code == 200){
                this.thirdDialogVisible = false;
                document.documentElement.style.overflow = "auto";
                this.$refs.formT.resetFields();
                this.initThirdData();
                this.success();
              }
            })
          }
        }})


    },
    thirdClose(){
      this.thirdDialogVisible = false;
      document.documentElement.style.overflow = "auto";
      this.$refs.formT.resetFields();
      this.initThirdData();
    },
    editClick(id,time){
      this.isAdd = false;
      this.editId = id;
      switch(time){
        case 1:
          for(let i = 0,leng = this.firstData.length; i < leng; i++){
            if(this.firstData[i].id == id){
              let arr = JSON.parse(JSON.stringify(this.firstData[i]));
              arr.process = arr.process.split("+")
              this.firstForm = arr;
            }
          };
          this.firstprocess = "修改一面面试流程";
          this.firstDialogVisible = true;
          break;
        case 2:
          for(let i = 0,leng = this.secondData.length; i < leng; i++){
            if(this.secondData[i].id == id){
              let arr = JSON.parse(JSON.stringify(this.secondData[i]));
              arr.firstProcess = arr.firstProcess.split("+");
              arr.secondProcess = arr.secondProcess.split("+");
              this.secondForm = arr;
            }
          };
          this.secondprocess = "修改二面面试流程";
          this.secondDialogVisible = true;
          break;
        case 3:
          for(let i = 0,leng = this.thirdData.length; i < leng; i++){
            if(this.thirdData[i].id == id){
              let arr = JSON.parse(JSON.stringify(this.thirdData[i]));
              arr.firstProcess = arr.firstProcess.split("+");
              arr.secondProcess = arr.secondProcess.split("+");
              arr.thirdProcess = arr.thirdProcess.split("+");
              this.thirdForm = arr;
            }
          };
          this.thirdprocess = "修改三面面试流程";
          this.thirdDialogVisible = true;
          break;
      }
    },
    deleteClick(id){
      this.deleteId = id;
      this.dialogDeleteVisible = true;
      document.documentElement.style.overflow = "hidden";
    },
    deletesend(){
      axios.post(this.url + "/process/delprocess",{
        processId:this.deleteId
      }).then(res=>{
        this.unlogin(res.data.code);
        if(res.data.code == 200){
          this.success();
          this.deleteId = "0";
          this.dialogDeleteVisible = false;
          document.documentElement.style.overflow = "auto";
        }
      })
    },
    deleteClose(){
      this.dialogDeleteVisible = false;
      document.documentElement.style.overflow = "auto";
    }
  },
}
</script>
<style scoped>
.hand{
  color: #1099ff;
}
.title {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
}
.left{
  background-color:#fff;
  min-height:700px;
  padding:24px 30px;
}
.firstLine{
  width:50px;
  height:1px;
  background-color:#6cc0ff;
  margin-top:10px;
}
.firstCircle{
  width:6px;
  height:6px;
  background-color:#6cc0ff;
  border-radius:3px;
  margin-top:8px;
  margin-left:8px;
}
.invite{
  width:100%;
  text-align:center;
  font-size:14px;
  color:#6cc0ff;
  margin-bottom:20px;
}
.secondLine{
  width:50px;
  height:1px;
  background-color:#fbb732;
  margin-top:10px;
}
.secondCircle{
  width:6px;
  height:6px;
  background-color:#fbb732;
  border-radius:3px;
  margin-top:8px;
  margin-left:8px;
}
.position{
  width:100%;
  text-align:center;
  font-size:14px;
  color:#fbb732;
  margin-bottom:20px;
}
.thirdLine{
  width:50px;
  height:1px;
  background-color:#21cad1;
  margin-top:10px;
}
.thirdCircle{
  width:6px;
  height:6px;
  background-color:#21cad1;
  border-radius:3px;
  margin-top:8px;
  margin-left:8px;
}
.process{
  width:100%;
  text-align:center;
  font-size:14px;
  color:#21cad1;
  margin-bottom:20px;
}
.first .el-button--mini{
  width:100px;
  text-align:center;
  padding:6px 6px!important;
  background-color:#6cc0ff;
  border:none;
  margin-bottom:10px;
}
.first .el-button--medium{
  width:100px;
  text-align:center;
  font-size:12px;
  padding:6px 6px!important;
  border:1px solid #d1d1d1;
  margin-bottom:10px;
}
.second .el-button--mini{
  width:100px;
  text-align:center;
  padding:6px 6px!important;
  background-color:#fbb732;
  border:none;
  margin-bottom:10px;
}
.second .el-button--medium{
  width:100px;
  text-align:center;
  font-size:12px;
  padding:6px 6px!important;
  border:1px solid #d1d1d1;
  margin-bottom:10px;
}
.third .el-button--mini{
  width:100px;
  text-align:center;
  padding:6px 6px!important;
  background-color:#21cad1;
  border:none;
  margin-bottom:10px;
}
.third .el-button--medium{
  width:100px;
  text-align:center;
  font-size:12px;
  padding:6px 6px!important;
  border:1px solid #d1d1d1;
  margin-bottom:10px;
}
/* .rightContent{
  width:calc(100%-17%)!important;
} */
  .operation {
    width: 40px;
    height: 24px;
    background-color: #e4edfb;
    text-align: center;
  }

  .operation i {
    font-size: 14px;
    cursor: pointer;
    color: #757575;;
  }

  .operation i:hover{
    color: #119aff;
  }
  .float{
    float:left;
    margin-right:10px
  }
  .secondTime::after{
    content:"";
    display:block;
    clear:both;
  }
  .high{
    height:540px;
    width:320px;
    overflow-y: auto;
  }
  @media screen and (min-width: 1200px) and (max-width: 1700px) {
    .dialogBox{
      width: 320px;
      height:400px;
      overflow-y: scroll;
      overflow-x: hidden;
    }
}
.clear::after{
  content:"";
  display:block;
  clear:both
}
</style>
